<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>

    <style>
        td {
            border: 1px solid #666;
            padding: 5px
        }
    </style>
</head>
<body>
<div id="app">
    <table style="border: 1px solid #666;">
        <tr>
            <td>ID</td>
            <td>用户名</td>
            <td>昵称</td>
        </tr>
        <tr v-for="item in tableData">
            <td>{{ item.id }}</td>
            <td>{{ item.username }}</td>
            <td>{{ item.nickname }}</td>
        </tr>
    </table>

</div>

<script>
    const App = {
        data() {
            return {
                tableData: []
            };
        },
        created() {
          this.load()
        },
        methods: {
            load() {
                fetch('/user').then(res=>res.json()).then(res => {
                    this.tableData = res
                })
            }
        }
    };
    Vue.createApp(App).use(ElementPlus).mount("#app");;
</script>

</body>
</html>
